<template>
	<div class="sub-filter" v-if="filterData && !filterLoading">
		<div class="item">
			<div class="head">品牌：</div>
			<div class="body">
				<a @click="changeBrand(brand.id)" :class="{active:filterData.selectedBrand===brand.id}" href="javasript:;"
					v-for="brand in filterData.brands" :key="brand.id">{{brand.name}}</a>
			</div>
		</div>
		<div class="item" v-for="p in filterData.saleProperties" :key="p.id">
			<div class="head">{{p.name}}：</div>
			<div class="body">
				<a @click="changeAttr(p, attr.id)" :class="{active:p.selectedProp===attr.id}" href="javasript:;" v-for="attr in p.properties"
					:key="attr.id">{{attr.name}}</a>
			</div>
		</div>
	</div>
	<div v-else class="sub-filter">
		<XtxSkeleton class="item" width="800px" height="40px" />
		<XtxSkeleton class="item" width="800px" height="40px" />
		<XtxSkeleton class="item" width="600px" height="40px" />
		<XtxSkeleton class="item" width="600px" height="40px" />
		<XtxSkeleton class="item" width="600px" height="40px" />
	</div>
</template>

<script>
	import {
		findSubCategoryFilter
	} from '@/api/category'
	import {
		useRoute
	} from 'vue-router'
	import {
		ref,
		watch
	} from 'vue'

	export default {
		setup(props, {emit}) {
			const route = useRoute()
			const filterData = ref(null)
			const filterLoading = ref(false)

			watch(() => route.params.id, (newVal, oldVal) => {
				if (newVal && route.path === ('/category/sub/' + newVal)) {
					filterLoading.value = true
					newVal && findSubCategoryFilter(route.params.id).then(({
						result
					}) => {
						result.selectedBrand = null
						result.brands.unshift({
							id: null,
							name: '全部'
						})

						result.saleProperties.forEach(p => {
							p.selectProp = undefined
							p.properties.unshift({
								if: null,
								name: '全部'
							})
						})
						filterData.value = result
						filterLoading.value = false
					})
				}
			}, {
				immediate: true
			})

			const getFilterParams = () => {
				const filterParams = {}
				const attrs = []

				filterParams.brandId = filterData.value.selectedBrand
				filterData.value.saleProperties.forEach(p => {
					const attr = p.properties.find(attr => attr.id === p.selectedProp)
					if (attr && attr.id !== undefined) {
						attrs.push({
							groupName: p.name,
							propertyName: attr.name
						})
					}
				})
				if (attrs.length) {
					filterParams.attrs = attrs
				}
				return filterParams
			}

			const changeBrand = brandId => {
				if (filterData.value.selectedBrand === brandId) {
					return
				}
				filterData.value.selectedBrand = brandId
				emit('filter-change', getFilterParams())
			}

			const changeAttr = (p, attrId) => {
				if (p.selectedProp === attrId) {
					return
				}
				p.selectedProp = attrId
				emit('filter-change', getFilterParams())
			}

			return {
				filterData,
				filterLoading,
				changeBrand,
				changeAttr
			}
		}
	}
</script>

<style lang="less" scoped>
	.sub-filter {
		background: #fff;
		padding: 25px;

		.xtx-skeleton {
			padding: 10px 0;
		}

		.item {
			display: flex;
			line-height: 40px;

			.head {
				width: 80px;
				color: #999;
			}

			.body {
				flex: 1;

				a {
					margin-right: 36px;
					transition: all .3s;
					display: inline-block;

					&.active,
					&:hover {
						color: @xtxColor;
					}
				}
			}
		}
	}
</style>
